<template>
    <div class="box">
        <div class="header">
              <van-nav-bar title="详情页" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
            <div><img :src="detailInfo.image" alt="" style="width:100%;"></div>
            <div>{{detailInfo.title}}</div>
            <div>￥{{detailInfo.price}}</div>
        </div>
        <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="" @click="$router.push('/cart')"/>
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
    </div>
</template>

<script setup >
import {ref,onMounted} from 'vue'
import request from '@/utils/request'
import {useRoute,useRouter} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
const route = useRoute()
const router = useRouter()
const detailInfo = ref([])
onMounted(()=>{
       request.get('/detail',{
        params:{
            id:route.params.id
        }
       }).then(res=>{
        if(res.data.code==200)
        {
           detailInfo.value=res.data.data
        }
    })
})

const addCart=()=>{
    if(localStorage.getItem('token'))
    {
         store.addItem(detailInfo.value)
    }else{
        router.push('/login')
    }
}
</script>
